<%-- 
    Document   : add.jsp
    Created on : 6-dec-2009, 21:46:57
    Author     : Simon
--%>

<%@include file="../header.jsp" %>

<h1>Add a medication</h1>

<c:if test="${!empty flash}">
    <div class="flash error">${flash}</div>
</c:if>

<form action="${pageContext.request.contextPath}/gp/medication/linkadd.jsp" method="post">
    <table>
        <tr>
            <td>
                <label for="name">Name</label>
            </td>
            <td>
                <input id="name" name="name" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="std_dosage">Standard dosage</label>
            </td>
            <td>
                <input type="text" name="stdDose" id="std_dosage" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="unit">Unit</label>
            </td>
            <td>
                <select id="unit" name="unitId">
                    <c:forEach var="unit" items="${units}">
                        <option value="${unit.id}">${unit.unit}</option>
                    </c:forEach>
                </select>
                <a href="#" id="add_link" class="none" style="text-decoration: none;">Add new</a>
                <span id="add_unit">
                    <input id="add_unit_input" type="text" id="unit" size="2"/>
                    <button id="add_unit_button" onclick="return false;">
                        Add
                    </button>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <label for="measurement_type">Measurement type</label>
                <span class="small" style="font-size: smaller; position:relative; left: 5px;">(optional)</span>
            </td>
            <td>
                <select id="measurement_type" name="measurementTypeId">
                    <option value="0"></option>
                    <c:forEach var="type" items="${types}">
                        <option value="${type.id}">${type.name} in ${type.unit}</option>
                    </c:forEach>
                </select>
                <a href="#" id="add_type_link" class="none" style="text-decoration: none;">Add new</a>
                <span id="add_type">
                    <input id="type_name" type="text" id="unit" size="10"/>
                    in
                    <select id="type_unit">
                        <c:forEach var="unit" items="${units}">
                            <option value="${unit.id}">${unit.unit}</option>
                        </c:forEach>
                    </select>
                    <button onclick="return false;">
                        Add
                    </button>
                </span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Add" name="submit" />
            </td>
        </tr>
    </table>
</form>


<script type="text/javascript">
    $(document).ready(function(){

        $("#add_type").hide();
        $("#add_type_link").click(function() {
            $("#measurement_type").fadeOut(500);
            $(this).fadeOut(500, function() {
                $("#add_type input").val('');
                $("#add_type").show();
                init_search($("#add_type input"),"Type","#888");
                $("#add_type button").click(function() {
                    if ($("#add_type input").val() != "Type")
                        add_type();
                });
            });
        });

        function add_type() {
            $.getJSON("${pageContext.request.contextPath}/gp/measurementtype/new",
            {name : $("#type_name").val(), type : $("#type_unit option:selected").val()},
            function(data, status) {
                if (data.success) {
                    $("#add_type").hide();
                    $("#add_type").after("<span id='fade'>Added</span>");
                    $("#fade").css("color","green");
                    $("#measurement_type").append("<option selected='true' value='"+data.id+"'>"+data.name+" in "+$("#type_unit option:selected").text()+"</option>");
                    $("#fade").fadeOut(2000, function() {
                        $("#fade").remove();
                        $("#add_type_link").toggle();
                    });
                    $("#measurement_type").show();
                }
                else {
                    $("#add_type").append("<span id='fade' style='color: red;'>Failed</span>");
                    $("#fade").fadeOut(1000, function() {$(this).remove();});
                }
            });
        }

        $("#add_unit").hide();
        $("#add_link").click(function() {
            $(this).fadeOut(500, function() {
                $("#add_unit input").val('');
                $("#add_unit").show();
                $("#add_unit_button").click(function() {
                    add_unit();
                });
            });
        });

        function init_search(elem, text, c) {
            var color = elem.css("color");
            elem.css("color",c);
            elem.val(text);
            elem.focus(function() {
                if ($(this).val() == text) {
                    $(this).val("");
                    elem.css("color",color);
                }
            });
            elem.blur(function() {
                if ($(this).val() == "") {
                    $(this).val(text);
                    elem.css("color",c);
                }
            });
        }

        function add_unit() {
            $.getJSON("${pageContext.request.contextPath}/gp/medication/unit/new", {unit : $("#add_unit_input").val()},
            function(data, status) {
                if (data.success) {
                    $("#add_unit").hide();
                    $("#add_unit").after("<span id='fade'>Added</span>");
                    $("#fade").css("color","green");
                    $("#unit").append("<option selected='true' value='"+data.id+"'>"+data.unit+"</option>");
                    $("#type_unit").append("<option value='"+data.id+"'>"+data.unit+"</option>");
                    $("#fade").fadeOut(2000, function() {
                        $("#fade").remove();
                        $("#add_link").toggle();
                    });
                }
                else {
                    $("#add_unit").append("<span id='fade' style='color: red;'>Failed</span>");
                    $("#fade").fadeOut(1000, function() {$(this).remove();});
                }
            });
        }
    });
</script>

<%@include file="../footer.jsp" %>
